<!--
 * @Author: wangshuguang
 * @Date: 2022-05-11 10:27:28
 * @LastEditTime: 2022-11-01 15:02:36
 * @LastEditors: wangshuguang
 * @Description: 可拖拽排序 级联组件
-->
<template>
  <div class="ArticleDragCascader">
    <div class="classifyContent">
      <div class="title">{{ numObj[lv] }}级类目</div>
      <vueDraggable
        v-model="dragList"
        class="classifyList"
        animation="300"
        handle=".mover"
        :group="{ name: 'plug' ,put: false, pull: 'clone' }"
        :disabled="!canDrag"
        @sort="sort"
      >
        <transition-group>
          <div
            v-for="item of cascaderData"
            :key="`item${item.id}`"
            class="classifyItem"
            :class="{active: nowChekckItem.id == item.id}"
            @click="nowChekckItem = item"
          >
            <div class="left">
              <i class="icon el-icon-s-operation mover" />
              <div>{{ item.categoryName }}</div>
              <div>({{ item.articleCnt }})</div>
            </div>
            <div class="right">
              <el-switch
                v-model="item.status"
                size="mini"
                active-color="#ffb72f"
                inactive-color="#ff4949"
                active-value="Y"
                inactive-value="N"
                @change="editStatus(item)"
              />
              <i class="el-icon-edit" @click.stop="edit(item)" />
              <i class="el-icon-delete" @click.stop="$emit('menuHandle','del',item)" />
              <i v-show="lv < 3" class="el-icon-arrow-right" />
            </div>
          </div>
        </transition-group>
      </vueDraggable>
      <el-button icon="el-icon-plus" class="addBtn" size="small" @click="$emit('menuHandle','add',parentData)">添加新分类</el-button>
    </div>
    <ArticleDragCascader
      v-if="nowChekckItem.children && lv < 3"
      class="child"
      :cascader-data.sync="nowChekckItem.children"
      :parent-data="nowChekckItem"
      :lv="lv+1"
      :can-drag="canDrag"
      @menuHandle="(...arg) => this.$emit('menuHandle',...arg)"
    />
  </div>
</template>

<script>
import vueDraggable from 'vuedraggable'
import ArticleDragCascader from './ArticleDragCascader'
import {
  categoryInfoSort
} from '@/api/knowledge'
export default {
  name: 'ArticleDragCascader',
  components: {
    vueDraggable,
    ArticleDragCascader
  },
  props: {
    canDrag: {},
    parentData: {},
    cascaderData: {},
    lv: {}
  },
  data() {
    return {
      nowChekckItem: {},
      numObj: {
        1: '一',
        2: '二',
        3: '三'
      }
    }
  },
  computed: {
    dragList: {
      get() {
        return this.cascaderData
      },
      set(val) {
        this.$emit('update:cascaderData', val)
      }
    }
  },
  watch: {
    parentData(now, prev) {
      if (now.id != prev.id) {
        this.nowChekckItem = {}
      }
    },
    cascaderData: {
      handler(val) {
        if (this.nowChekckItem.id) {
          this.nowChekckItem = this.cascaderData.find(item => item.id == this.nowChekckItem.id) || this.cascaderData[0] || {}
          console.log('this.nowChekckItem', this.nowChekckItem)
        } else if (this.cascaderData.length) {
          this.nowChekckItem = this.cascaderData[0]
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    console.log('mounted', this.cascaderData, this.lv)
  },
  methods: {
    edit(item) {
      this.$emit('menuHandle', 'edit', {
        ...item,
        parentStatus: this.parentData.status
      })
    },
    editStatus(item) {
      console.log('parentData', this.parentData)
      if (!this.parentData.status || this.parentData.status == 'Y') {
        this.$emit('menuHandle', 'editStatus', item)
      } else {
        this.$message.error('父级类目被禁用，子级类目不允许启用')
        item.status = 'N'
      }
    },
    sort(...arg) {
      console.log('arg', arg)
      console.log('dragList', this.dragList)
      const arr = this.dragList.map((item, index) => {
        return {
          ...item,
          sort: index + 1
        }
      })
      console.log('arr', arr)
      categoryInfoSort(arr).then(res => {
        console.log(res)
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.ArticleDragCascader{
  // display: inline-block;
  .classifyContent{
    width: 400px;
    display: inline-block;
    border: 1px solid #ddd;
    padding: 5px;
    .title{
      padding: 10px;
      background: #ddd;
    }
    .addBtn{
      width: 100%;
    }
    .classifyList{
      height: 300px;
      overflow: auto;
      >span{
        display: block;
      }
      .classifyItem{
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 5px;
        border-left: 4px solid transparent;
        .left{
          div{
            margin-right: 10px;
          }
        }
        >div{
          display: flex;
          i{
            margin: 0 5px;
            font-size: 20px;
            cursor: pointer;
          }
        }
        &.active{
          border-left-color: #ffb72f;
          background: #f3f3f3;
        }
      }
    }
  }
  .child{
    display: inline-block;
    margin-left: 10px;
  }
}
</style>
